<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworks</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #8B0000; /* 更深的红色背景 */
            font-family: Arial, sans-serif;
        }
        canvas {
            display: block;
        }
        .intro {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            font-size: 1.2em;
            font-family: "Courier New", Courier, monospace; /* 使用更具节日感的字体 */
            background: rgba(139, 0, 0, 0.5); /* 红色背景 */
            padding: 20px;
            border-radius: 10px;
            animation: fadeIn 2s ease-in-out; /* 添加淡入动画 */
            border: 2px solid gold; /* 金色边框 */
        }

        .intro h1 {
            font-size: 2em;
            color: gold;
            margin-bottom: 20px;
        }

        .intro input, .intro select {
            padding: 10px;
            margin: 10px;
            font-size: 1em;
            border: 1px solid gold;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .intro button {
            padding: 10px 20px;
            font-size: 1em;
            background-color: gold; /* 金色背景 */
            color: #8B0000; /* 红色文字 */
            border: none;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }

        .intro button:hover {
            background-color: #FFD700; /* 更亮的金色 */
        }
        /* 淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        /* 祝福弹幕样式 */
        .greeting {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: gold;
            font-size: 1.5em;
            font-weight: bold;
        }
        .blessing {
            position: absolute;
            font-size: 1.2em;
            color: white;
            padding: 10px;
            background: rgba(139, 0, 0, 0.8); /* 红色背景 */
            border-radius: 5px;
            white-space: nowrap;
            pointer-events: none; /* 避免遮挡烟花效果 */
            border: 1px solid gold; /* 金色边框 */
        }
    </style>
</head>
<body>
    <div class="intro">
        <h1>新年快乐！</h1>
        <input type="text" id="name" placeholder="请输入您的姓名">
        <select id="gender">
            <option value="先生">先生</option>
            <option value="女士">女士</option>
        </select>
        <button onclick="startFireworks()">开始</button>
    </div>
    <div class="greeting" id="greeting"></div>
    <canvas id="fireworks"></canvas>
    <audio id="background-music" loop>
        <source src="newyear.flac" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <script>
        const canvas = document.getElementById('fireworks');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Firework {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.targetY = Math.random() * canvas.height * 0.5;
                this.speedY = -Math.random() * 10 - 5;
                this.particles = [];
                this.exploded = false;
            }

            update() {
                if (!this.exploded) {
                    this.y += this.speedY;
                    if (this.y <= this.targetY) {
                        this.exploded = true;
                        this.createParticles();
                    }
                } else {
                    for (let particle of this.particles) {
                        particle.update();
                    }
                }
            }

            draw() {
                if (!this.exploded) {
                    ctx.save();
                    ctx.fillStyle = 'white';
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.restore();
                } else {
                    for (let particle of this.particles) {
                        particle.draw(ctx);
                    }
                }
            }

            createParticles() {
                for (let i = 0; i < 100; i++) {
                    this.particles.push(new Particle(this.x, this.y));
                }
            }
        }

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 3 + 1;
                this.angle = Math.random() * Math.PI * 2;
                this.speed = Math.random() * 5 + 2;
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
                this.alpha = 1;
            }

            update() {
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;
                this.speed *= 0.96;
                this.alpha -= 0.01;
            }

            draw(ctx) {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }

        class Star {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 2 + 1;
                this.twinkleSpeed = Math.random() * 0.05 + 0.01;
                this.twinkleDirection = 1;
                this.alpha = Math.random();
            }

            update() {
                this.alpha += this.twinkleDirection * this.twinkleSpeed;
                if (this.alpha > 1 || this.alpha < 0) {
                    this.twinkleDirection *= -1;
                }
            }

            draw(ctx) {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }

        class Meteor {
            constructor() {
                this.x = canvas.width; // 从右上角开始
                this.y = Math.random() * canvas.height * 0.2; // 随机高度
                this.size = Math.random() * 2 + 1;
                this.speedY = Math.random() * 5 + 5; // 向下速度
                this.speedX = -(Math.random() * 5 + 5); // 向左速度
                this.color = 'yellow';
                this.alpha = 1;
                this.tail = []; // 拖尾效果
            }

            update() {
                this.y += this.speedY;
                this.x += this.speedX;
                this.alpha -= 0.01; // 减少 alpha 的速度

                // 添加当前位置到拖尾数组
                this.tail.push({ x: this.x, y: this.y, size: this.size, alpha: this.alpha });

                // 移除旧的拖尾部分
                if (this.tail.length > 20) {
                    this.tail.shift();
                }
            }

            draw(ctx) {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();

                // 添加光晕效果
                ctx.shadowColor = 'yellow';
                ctx.shadowBlur = 15;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
                ctx.fill();

                // 绘制拖尾效果
                for (let i = 0; i < this.tail.length; i++) {
                    const tailSegment = this.tail[i];
                    ctx.globalAlpha = tailSegment.alpha;
                    ctx.beginPath();
                    ctx.arc(tailSegment.x, tailSegment.y, tailSegment.size, 0, Math.PI * 2);
                    ctx.fill();
                }

                ctx.restore();
            }
        }

        let fireworks = [];
        let blessings = [];
        let stars = [];
        let meteors = [];
        let fireworkInterval;
        let meteorInterval;
        let blessingInterval;
        let animationFrameId;

        function createFirework() {
            const x = Math.random() * canvas.width;
            const y = canvas.height;
            fireworks.push(new Firework(x, y));
        }

        function createStars() {
            for (let i = 0; i < 100; i++) {
                stars.push(new Star());
            }
        }

        function createMeteor() {
            meteors.push(new Meteor());
        }

        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 更新星星
            for (let star of stars) {
                star.update();
                star.draw(ctx);
            }

            // 更新流星
            for (let i = meteors.length - 1; i >= 0; i--) {
                meteors[i].update();
                meteors[i].draw(ctx);

                if (meteors[i].alpha <= 0) {
                    meteors.splice(i, 1);
                }
            }

            // 更新烟花
            for (let i = fireworks.length - 1; i >= 0; i--) {
                fireworks[i].update();
                fireworks[i].draw();

                if (fireworks[i].exploded && fireworks[i].particles.every(particle => particle.alpha <= 0)) {
                    fireworks.splice(i, 1);
                }
            }

            // 更新弹幕
            for (let i = blessings.length - 1; i >= 0; i--) {
                const blessing = blessings[i];
                blessing.x -= 2; // 弹幕移动速度
                if (blessing.x < -blessing.width) {
                    document.getElementById(blessing.id).remove();
                    blessings.splice(i, 1);
                } else {
                    document.getElementById(blessing.id).style.left = `${blessing.x}px`;
                }
            }

            animationFrameId = requestAnimationFrame(animate);
        }

        function startFireworks() {
            const name = document.getElementById('name').value;
            const gender = document.getElementById('gender').value;
            const greeting = document.getElementById('greeting');
            greeting.textContent = `新年快乐，${name}${gender}！`;
            document.querySelector('.intro').style.display = 'none';
            fireworkInterval = setInterval(createFirework, 300);
            meteorInterval = setInterval(createMeteor, 3000); // 每3秒生成一个流星
            blessingInterval = setInterval(createBlessing, 2000); // 每2秒生成一条祝福
            animate();

            // 播放音乐
            const music = document.getElementById('background-music');
            music.play();
        }

        // 祝福弹幕
        function createBlessing() {
            const blessingsText = [
                "新年快乐，万事如意！",
                "祝您在新的一年里身体健康，家庭幸福！",
                "新的一年，新的希望，新的开始！",
                "祝您事业有成，步步高升！",
                "愿您的生活充满阳光和欢笑！",
                "新年新气象，愿您新的一年里，好运连连，笑口常开！",
                "新年快乐！愿您的新年充满爱与温暖!",
                "祝爷爷奶奶/外公外婆福如东海，寿比南山，新年快乐！",
                "祝爸爸妈妈身体健康，笑口常开，新年快乐！",
                "祝你新年快乐，生活像烟花一样绚烂多彩！",
                "祝你新年快乐，生活像烟花一样绚烂多彩！",
                "新年快乐！愿你的每一天都像巧克力一样甜蜜！",
                "祝你新年快乐，烦恼全跑掉，快乐全来到！",
                "祝你新年快乐，越活越年轻，越长越漂亮！",
                "新年快乐！愿你的生活像电影一样精彩，结局永远美好！"
            ];

            const text = blessingsText[Math.floor(Math.random() * blessingsText.length)];
            const blessingDiv = document.createElement('div');
            blessingDiv.classList.add('blessing');
            blessingDiv.textContent = text;
            blessingDiv.style.top = `${Math.random() * 80 + 10}%`;
            blessingDiv.style.left = `${canvas.width}px`;
            document.body.appendChild(blessingDiv);

            const id = `blessing-${Date.now()}`;
            blessingDiv.id = id;
            blessings.push({
                id: id,
                x: canvas.width,
                width: blessingDiv.offsetWidth
            });
        }

        function handleVisibilityChange() {
            if (document.hidden) {
                // 页面不可见时暂停动画
                clearInterval(fireworkInterval);
                clearInterval(meteorInterval);
                clearInterval(blessingInterval);
                cancelAnimationFrame(animationFrameId);
            } else {
                // 页面可见时恢复动画
                fireworkInterval = setInterval(createFirework, 300);
                meteorInterval = setInterval(createMeteor, 3000);
                blessingInterval = setInterval(createBlessing, 2000);
                animate();
            }
        }

        // 监听页面可见性变化
        document.addEventListener('visibilitychange', handleVisibilityChange);

        createStars();
    </script>
</body>
</html>